<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>H职场</title>
		<link rel="stylesheet" href="css/bootstrap-css/bootstrap.min.css" />
		<link rel="import" href="navbar.html">
		<link rel="stylesheet" href="css/slide.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<!--顶部-->
		<script type="text/javascript">
			var link = document.querySelector('link[rel="import"]');
			console.log(link.import);
			var content = link.import;
			// 从 navbar.html 的文档中获取 DOM。
			var head = content.querySelector('.head');
			document.body.appendChild(head.cloneNode(true));
		</script>
		<!--轮播图上搜索框-->
		<div class="search">
			<form action="index.html" type="get">
				<input type="text" name="title" placeholder="搜索职位">
				<img src="img/searchBtn.png" alt="" class="btn">
				<button class="btn"></button>
			</form>
		</div>
		<!--轮播图:Carousel-->
		<!--<img src="img/Slider/Slider1.jpg" style="width: 100%; height: 500px; margin-top: -20px;">-->
		<div class="carousel slide" id="mainCarousel">
			<!--轮播图5个远点  ol：有序列表  carousel-indicators：轮播索引-->
			<ol class="carousel-indicators">
				<!--data-slide-to指定该li负责切换到轮播图那一片，索引从0开始
	    		data-target要指定控制的是那个轮播容器的轮播-->
				<li data-slide-to="0" data-target="#mainCarousel" class="active"></li>
				<li data-slide-to="1" data-target="#mainCarousel"></li>
				<li data-slide-to="2" data-target="#mainCarousel"></li>
				<li data-slide-to="3" data-target="#mainCarousel"></li>
			</ol>
			<!--轮播内容-->
			<div class="carousel-inner">
				<div class="item active">
					<a href="#">
						<img src="img/slide/navImg3.jpg" alt="">
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/slide/navImg1.jpg" alt="">
					</a>
				</div>
				<div class="item">
					<a href="#"><img src="img/slide/navImg2.jpg" alt=""></a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/slide/navImg4.jpg" alt="">
					</a>
				</div>
			</div>
			<!--添加俩个超链接 控制滑动到上一页或者下一页，添加类carousel-control：轮播控件
	    		还有用于定位的类left 或right
	    		上一个：previonus 简写prev
	    		下一个：next
	    	-->
			<a href="#" data-target="#mainCarousel" data-slide="prev" class="carousel-control left">
				<samp class="glyphicon glyphicon-chevron-left"></samp>
			</a>
			<a href="#" data-target="#mainCarousel" data-slide="next" class="carousel-control right">
				<samp class="glyphicon glyphicon-chevron-right"></samp>
			</a>
		</div>
		<!--中间-->
		<div class="container">
			<h1 style="text-align: center;">精英推荐</h1 >
			<div class="city">
				<img src="img/pic.png" />
				<h3>胡小伟</h3>
				<p>兼职/安卓开发工程师
					<a>下载简历</a>
				</p>
				<!--简介-->
				<div class="Introduction ">
					<p> NIIT有限公

					</p>
				</div>
			</div>

			<div class="city">
				<img src="img/pic.png" />
				<h3>胡小伟</h3>
				<p>兼职/安卓开发工程师
					<a>下载简历</a>
				</p>
			</div>

			<div class="city">
				<img src="img/pic.png" />
				<h3>胡小伟</h3>
				<p>兼职/安卓开发工程师
					<a>下载简历</a>
				</p>
			</div>
			<div class="city">
				<img src="img/pic.png" />
				<h3>胡小伟</h3>
				<p>兼职/安卓开发工程师
					<a>下载简历</a>
				</p>
			</div>
			<div class="city">
				<img src="img/pic.png" />
				<h3>胡小伟</h3>
				<p>兼职/安卓开发工程师
					<a>下载简历</a>
				</p>
			</div>
			<div class="city">
				<img src="img/pic.png" />
				<h3>胡小伟</h3>
				<p>兼职/安卓开发工程师
					<a>下载简历</a>
				</p>
			</div>
			<div class="city">
				<img src="img/pic.png" />
				<h3>胡小伟</h3>
				<p>兼职/安卓开发工程师
					<a>下载简历</a>
				</p>
			</div>
			<div class="city">
				<img src="img/pic.png" />
				<h3>胡小伟</h3>
				<p>兼职/安卓开发工程师
					<a>下载简历</a>
				</p>
			</div>
		</div>
		<!--底部-->
		<div class="bottom">
         <ul>
         	<li></li>
         	<li></li>
         	<li></li>
         	<li></li>
         	<li></li>
         </ul>
		
		</div>
	</body>

</html>